<template>
  <div style="padding:30px;">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="商品类别">
        <el-input v-model="form.name" clearable placeholder="商品类别名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <el-col :span="1.5">
      <el-button
        plain
        size="small"
        icon="el-icon-plus"
        type="primary"
        @click="addform()">新增父类别</el-button>
        </el-col>
        <el-col :span="1.5">
      <el-button
        type="info"
        plain
        icon="el-icon-sort"
        size="small"
        @click="toggleExpandAll">展开/折叠</el-button>
    </el-col>
    </el-row></br>
    <el-table ref="filterTable" :data="tableData" :default-expand-all="isExpandAll" v-if="refreshTable"
      :row-key="getRowKeys"
       border
       lazy
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="name" label="商品类别名称"></el-table-column>
      <!-- <el-table-column prop="ifSon" label="是否子节点">
        <template slot-scope="scope">
          <el-tag :type="scope.row.ifSon == '0' ? 'danger' : 'success'" disable-transitions>
            {{scope.row.ifSon==0?'否':'是'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="ifFather" label="是否父节点">
        <template slot-scope="scope">
          <el-tag :type="scope.row.ifFather == '0' ? 'danger' : 'success'" disable-transitions>
            {{scope.row.ifFather==0?'否':'是'}}
          </el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="210px">
        <template slot-scope="scope">
          <el-button  size="small" icon="el-icon-edit" type="text"
                @click="updateProducttype(scope.row)">编辑</el-button>
          <el-button  size="small" icon="el-icon-plus" type="text"
                @click="add(scope.row)">新增</el-button>
          <el-button  size="small" icon="el-icon-delete" type="text"
                @click="delProducttype(scope.row,scope.index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--添加主类别 -->
    <el-dialog title="新增父类别"
          v-dialogDrag :close-on-click-modal="false"
          :modal="false"
          :visible.sync="addFathershow"
          width="40%">
      <el-form :model="addformFather" ref="addformFather" label-width="120px">
        <el-form-item label="商品类别名" prop="name" :rules="[{required: true, message: '类别名不能为空'}]">
          <el-input v-model="addformFather.name" clearable placeholder="商品类别名" style="width: 40%;"></el-input>
        </el-form-item>
       <!-- <el-form-item label="是否子节点" prop="ifSon">
          <el-select v-model="addformFather.ifSon" clearable placeholder="请选择">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="是否主类别" prop="ifSon">
          <el-select v-model="addformFather.ifFather" :disabled="true" clearable placeholder="请选择">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item> -->
        <input v-model="addformFather.standby1" type="hidden" />
         <input v-model="addformFather.ifSon" type="hidden" />
      <input v-model="addformFather.ifFather" type="hidden" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addFather('addformFather')">提 交</el-button>
        <el-button @click="err()">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增子类别 -->
    <el-dialog title="添加子类别"
         v-dialogDrag
         :close-on-click-modal="false"
         :modal="false"
         :visible.sync="addChildshow"
          width="40%">
      <el-form :model="addformChild" ref="addformChild" label-width="100px">
        <el-form-item label="商品类别" prop="name"
           :rules="[{required: true, message: '类别名不能为空'}]">
          <el-input v-model="addformChild.name" placeholder="商品类别名" style="width: 50%;"></el-input>
        </el-form-item>
        <!-- <el-form-item label="是否子节点" prop="ifSon">
          <el-select v-model="addformChild.ifSon" :disabled="true" clearable placeholder="请选择">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否父节点" prop="ifSon">
          <el-select v-model="addformChild.ifFather" :disabled="true" clearable placeholder="请选择">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addChild('addformChild')">提 交</el-button>
        <el-button @click="err()">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改-->
    <el-dialog title="修改商品类别" v-dialogDrag :close-on-click-modal="false" :modal="false" :visible.sync="updateshow"
      width="40%">
      <el-form :model="updateform" ref="updateform" label-width="100px">
        <el-form-item label="商品类型" prop="name">
          <el-input v-model="updateform.name" :disabled="updateform.standby3" clearable placeholder="商品类型"
            style="width: 50%;"></el-input>
        </el-form-item>
        <!-- <el-form-item label="是否子节点" prop="ifSon">
          <el-select v-model="updateform.ifSon" :disabled="true" clearable placeholder="请选择" value-key="updateform.ifSon">
            <el-option label="是" :value="1" :key="1"></el-option>
            <el-option label="否" :value="0" :key="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否父节点" prop="ifFather">
          <el-select v-model="updateform.ifFather" :disabled="true" clearable placeholder="请选择" value-key="updateform.ifFather">
            <el-option label="是" :value="1" :key="1"></el-option>
            <el-option label="否" :value="0" :key="0"></el-option>
          </el-select>
        </el-form-item> -->
        <el-input v-model="updateform.id" type="hidden"></el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updatetype()">提 交</el-button>
        <el-button @click="err()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {list,showType,add,update,del} from '@/api/producttype'

  export default {
    data() {
      return {
        form: {
          name: ''
        },

        //表格树数据
        tableData: [],
        /* datadiv: '', */
        //子节点
        children: 'children',
        // 是否展开，默认全部不展开
        isExpandAll: false,
        // 重新渲染表格状态
        refreshTable: true,
        //添加主类别
        addformFather: {
          name: '',
          ifSon: 0,
          ifFather: 1,
          standby1: 1
        },
        //添加子类别
        addformChild: {
          name: '',
          ifSon: 1,
          ifFather: 0,
          standby1: 0
        },
        //编辑
        updateform: {
          id: '',
          name: '',
          ifSon: 0,
          ifFather: 1,
          standby1: ''
        },
        addChildshow: false,
        addFathershow: false,
        updateshow: false,
      }
    },
    //钩子函数
    created() {
      this.showByLimit();
    },

    methods: {
      getRowKeys(row){
        return row.id //
      },
      //分页查询所有
      showByLimit() { // 修改当前页所触发的函数
        return new Promise((resolve, reject) => {
          showType({
            'typeName': 1,
            'name': this.form.name
          }).then(response => {
            const {
              data,
              count
            } = response
            this.tableData = data;
            this.count = count;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //模糊查询表单提交
      onSubmit() {
        return new Promise((resolve, reject) => {
          showType({
            'typeName': 1,
            'name': this.form.name
          }).then(response => {
            const {
              data,
              count
            } = response
            this.tableData = data;
            this.count = count;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //点击添加主类别
      addform(data) {
        this.addformFather = {};
        this.addFathershow = true;
        this.addformFather.ifSon = '0';
        this.addformFather.ifFather = '1';
        this.addformFather.standby1 = 0;
      },
      /** 展开/折叠操作 */
      toggleExpandAll() {
        this.refreshTable = false;
        this.isExpandAll = !this.isExpandAll;
        this.$nextTick(() => {
          this.refreshTable = true;
        });
      },
      //点击添加子类别
      add(data) {
        this.addformChild = {};
        this.addChildshow = true;
        this.addformChild.standby1 = data.id;
        this.addformChild.ifSon = '1';
        this.addformChild.ifFather = '0';
        /* this.datadiv = data; */
      },
      //取消让弹框隐藏
      err() {
        this.addChildshow = false;
        this.addFathershow = false;
        this.updateshow = false;
      },
      updateProducttype(row) {
        this.updateshow = true;
        this.updateform = row;
      },
      /* this.$refs[formName].validate((valid) => {
                if (valid) {
                  alert('submit!');
                } else {
                  console.log('error submit!!');
                  return false;
                }
              }); */
      //提交添加主类别
      addFather(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            return new Promise((resolve, reject) => {
              add({
                'name': this.addformFather.name,
                'standby1': this.addformFather.standby1,
                'ifSon': this.addformFather.ifSon,
                'ifFather': this.addformFather.ifFather
              }).then(response => {
                const {
                  count
                } = response
                const newChild = {
                  id: count,
                  label: this.addformFather.name,
                  children: []
                };
                this.$message({
                  message: "添加成功",
                  type: 'success',
                  onClose: () => {
                    this.showByLimit();
                    this.err();
                  }
                });
                resolve()
              }).catch(error => {
                reject(error)
              })
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      /* this.$refs[formName].validate((valid) => {
                if (valid) {
                  alert('submit!');
                } else {
                  console.log('error submit!!');
                  return false;
                }
              }); */
      //提交添加子类别
      addChild(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            return new Promise((resolve, reject) => {
              add({
                'name': this.addformChild.name,
                'standby1': this.addformChild.standby1,
                'ifSon': this.addformChild.ifSon,
                'ifFather': this.addformChild.ifFather
              }).then(response => {
                this.$message({
                  message: "添加成功",
                  type: 'success',
                  onClose: () => {
                    this.err();
                    this.showByLimit();//重新渲染数据
                  }
                });
                resolve()
              }).catch(error => {
                reject(error)
              })
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //提交修改
      updatetype() {
        return new Promise((resolve, reject) => {
          update({
            'id': this.updateform.id,
            'name': this.updateform.name,
            'ifSon': this.updateform.ifSon,
            'ifFather': this.updateform.ifFather
          }).then(response => {
            this.$message({
              message: '修改成功',
              type: 'success',
              code: 1500,
              onClose: () => {
                this.err();
                this.showByLimit();
              }
            });
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //删除
      delProducttype(row, index) {
        console.log(row);console.log(index);
        if (row.children.length != 0) {
          this.$message({
            message: "该类别下有子类别",
            type: 'warning'
          });
          return;
        }
        this.$confirm('此操作将永久删除该商品类别, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(response => {
          return new Promise((resolve, reject) => {
            del({
              'id': row.id
            }).then(response => {
              this.$message({
                message: "删除成功",
                type: 'success',
                duration:1500,
                onClose: () => {
                  location.reload()
                  }
              });
              resolve()
            })
          })
        }).catch(error => {
          reject(error)
        })
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
    }
  }
</script>
